<template>
	<view  class="active">
		<view>
			<image class="actiber" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/%E9%81%BF%E5%9D%91.png" mode=""></image>
		</view>
		
		<view class="avtivex" v-for="(item,index) in userlist" :key="userlist" @click="avctiao(index)">
			<view class="jiacu">{{item.title}}</view>
			<view class="aetra">{{item.simpleTextDesc.desc}}</view>
			<van-icon name="arrow" colcor="#000" size="18" class="arrteer"/>
			<view class="atbije">15个避坑点</view>
		</view>
		<navigator :url="info" @click="avctiao">
		</navigator>
	</view>
</template>

<script>
	import Api from '../../http/api.js'
	export default{
		data(){
			return{
				q:{
					index:1,
					size:50
				},
				userlist:[],
				info:''
			}
		},
		onLoad() {
			this.loagherv()
		},
		methods:{
			async loagherv(){
				const res = await Api.jumpding(this.q)
				this.userlist = res.data.data
				console.log(this.userlist)
			},
			avctiao(index){
				this.info = this.userlist[index].detailUrl
				uni.navigateTo({
					url: `/pages/components/out?id=`+this.info,
				})
			}
		}
	}
</script>

<style lang="scss">
	.active{
background-color: #f1f1f1;
	}
	.actiber{
		width: 100%;
		height: 170px;
	}
	.avtivex{
		display: inline-block;
		width: 90%;
		background-color: #fff;
		border-radius: 20px;
		margin-top: 10px;
		padding: 20px;
		margin-left: 5%;
		.jiacu{
			font-weight: 700;
		}
		.aetra{
			display: inline-block;
			font-size: 24rpx;
			color: #a4a4a4;
          width: 80%;
		    text-overflow: ellipsis;
		  overflow: hidden;
		   word-break: break-all;
		      white-space: nowrap;
		  height: 30rpx;
		}
		.arrteer{
			float: right;
		}
		.atbije{
			width: 104rpx;
			height: 28rpx;
			font-size: 20rpx;
			background-color: #FFF2F2;
			font-weight: 500;
			color: #B56065;
			line-height: 23rpx;
		}
	}
</style>